<template>
  <div class="vux-cell-box">

    <cell title="时间" :value="checklist.length?checklist:placeholder" is-link
          @click.native="showPopup=!showPopup"></cell>


    <div v-transfer-dom>
      <popup v-model="showPopup" position="bottom" max-height="50%">
        <div class="vux-popup-header vux-1px-b">
          <div class="vux-popup-header-left" @click="checklist=[]">清空</div>
          <div class="vux-popup-header-title"></div>
          <div class="vux-popup-header-right" @click="showPopup=!showPopup">完成</div>
        </div>
        <checklist title="最多选两个" :options="commonList" v-model="checklist" :max=2 :min="2"
                   @on-change="onChange"></checklist>

      </popup>
    </div>
  </div>
</template>
<script>
  import {Popup, Cell, Checklist, TransferDom} from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Cell,
      Checklist,
      Popup
    },
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      }
    },
    data () {
      return {
        showPopup: false,
        checklist: [],
        commonList: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
      }
    },
    methods: {
      onChange (val) {
        this.$emit('input', this.checklist)
      }
    }
  }
</script>

<style scoped>

  .vux-cell-box {
    position: relative;
  }

  .vux-cell-box:before {
    content: " ";
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    transform-origin: 0 0;
    transform: scaleY(0.5);
    left: 15px;
  }
</style>
